<template>
  <div class="side-left-right">
    <div class="item-plane">
      <div class="item_1">
        <div class="head1">
          <span class="text1">安防设备</span>
        </div>
        <div class="container">
          <div class="bg1" :class="{ 'activebg': isLeftActive }">
            <div class="img1">
              <img src="/imgs/af/图层 660.png" />
            </div>
            <div class="text1">监控</div>
            <div class="text2">{{ monitor }}</div>
            <div class="left-button" @click="toggleLeftButton" :class="{ 'active': isLeftActive }"></div>
          </div>
          <!-- <div class="bg2" :class="{ 'activebg': isMiddleActive }">
            <div class="img2">
              <img src="/imgs/af/门禁 (4).png" />
            </div>
            <div class="text1">门禁</div>
            <div class="text2">{{ door }}</div>
            <div class="middle-button" @click="toggleMiddleButton" :class="{ 'active': isMiddleActive }">
            </div>
          </div>
          <div class="bg3" :class="{ 'activebg': isRightActive }">
            <div class="img3">
              <img src="/imgs/af/人脸识别 (1).png" />
            </div>
            <div class="text1">人脸闸机</div>
            <div class="text2">{{ face }}</div>
            <div class="right-button" @click="toggleRightButton" :class="{ 'active': isRightActive }"></div>
          </div> -->
        </div>
      </div>
      <div class="item_5">
        <div class="head">
          <span class="title">实时监控</span>
        </div>
        <div class="box">
          <div class="shexiang">
            <ws-win ref="wsp" :realplay="realplay1"></ws-win>
          </div>
          <div class="shexiang">
            <ws-win ref="wsp2" :realplay="realplay2"></ws-win>
          </div>
          <div class="shexiang">
            <ws-win ref="wsp3" :realplay="realplay3"></ws-win>
          </div>
        </div>
      </div>

      <div class="item_2" v-if="task">
        <div class="head2">
          <span class="text2">巡查任务</span>
        </div>
        <div class="box">
          <select class="xiala" id="fruit" name="fruit">
            <option v-for="(item, index) in select" :key="index" :value="item.id">{{ item.name }}</option>
          </select>
          <div class="people"></div>
          <div class="info">
            <div class="one">
              <div class="title">巡查任务：</div>
              <div class="value">电子巡查河道及周边地区，保证河道周围 无其他安全隐患。</div>
            </div>
            <div class="one">
              <div class="title">巡查人员：</div>
              <div class="value">
                <img style="width: 22px; height: 21px;" src="/imgs/af/ren.png">
                <span>王伟</span>
                <img style="width: 22px; height: 21px;" src="/imgs/af/ren.png">
                <span>吴磊</span>
              </div>
            </div>
            <div class="one">
              <div class="title">联系人员：</div>
              <div class="value">
                1373219****
              </div>
            </div>
          </div>
          <div class="bg">
            <div class="pic1"></div>
          </div>
          <div class="pic2">
            <div class="top">
              <div ref="pieChart" class="chart"></div>
              <div class="you">
                <div class="left">
                  <img src="/imgs/af/1.png" alt="巡查点图标">
                  <div class="title">巡查点</div>
                </div>
                <div class="right">
                  <span class="qian">10</span>/<span class="hou">12</span>
                </div>
              </div>
            </div>
            <div class="bottom">
              <div class="text">巡查进度</div>
            </div>
          </div>
          <div class="bg1">
            <div class="pic3"></div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import {
  ref,
  watch,
  onMounted,
  onBeforeUpdate,
  computed
} from 'vue';
import * as echarts from 'echarts'
import { useStore } from "vuex";
const store = useStore()
const task = ref(false)
import callApi from "@/api/proj.js";
import wsWin from "cmpt/hk/play.vue";
const wsp = ref(null);
const wsp2 = ref(null);
const wsp3 = ref(null);
const realplay1 = ref(null)
const realplay2 = ref(null)
const realplay3 = ref(null)
const {
  cam
} = callApi();
//定义按钮触发
const isLeftActive =ref(true)
const isMiddleActive = ref(false);
const isRightActive = ref(false);
// 饼图容器的引用
const pieChart = ref(null)
const door = ref(0)
const monitor = ref(0)
const face = ref(0)
const jiankong = () => {
  cam.play("6492de0b7e0a49eda07c07583d9ce935").then(r => {
    realplay1.value = r
    wsp.value.call.play(r, "实时监控");
  });
  cam.play("013aa3d4a9e84914b6d624fe3aca938b").then(r => {
    realplay2.value = r
    wsp2.value.call.play(r, "实时监控");
  });
  cam.play("b884519f9fd749ffac2a33028fadeecc").then(r => {
    realplay3.value = r
    wsp3.value.call.play(r, "实时监控");
  });
}
onMounted(async () => {
  setTimeout(function () {
    jiankong();
  }, 8000)
  const chart = echarts.init(pieChart.value);
  const option = {
    series: [{
      name: '告警统计',
      type: 'pie',
      radius: ['70%', '50%'], // 设置饼图大小
      center: ['50%', '50%'],
      labelLine: {  //删除指示线
        show: false
      },
      data: [{
        value: 75,
        itemStyle: {
          color: '#35E384'
        }
      },
      {
        value: 25,
        itemStyle: {
          color: 'rgba(0, 0, 0, 0)'
        }
      }
      ]
    }],
    graphic: [{
      type: 'group',
      left: 'center',
      top: '33px',
      children: [
        {
          type: 'text',
          left: 'center',
          top: 0,
          style: {
            text: 75 + "%",
            fontFamily: 'Adobe Heiti Std',
            fontWeight: 'normal',
            fontSize: 15,
            fill: '#35E384',
            lineHeight: 41,
            fontStyle: 'italic',
            width: 34,
            height: 20,
            background: 'linear-gradient(0deg, #FF9C9C 0%, #FF1515 100%)',
            // 让背景应用到文字上
            backgroundClip: 'text',
            textFill: 'transparent',
            align: 'center',
          }
        }
      ]
    }]
  };
  chart.setOption(option);

});
function toggleLeftButton() {
  // 切换左侧按钮的状态
  isLeftActive.value = !isLeftActive.value;
  isMiddleActive.value = false;
  isRightActive.value = false;
  // store.getters.motior);
  store.dispatch("updateHSetMotior", isLeftActive.value);
  store.dispatch("updateHSetDoor", isMiddleActive.value);
  store.dispatch("updateHSetFace", isRightActive.value);
}
function toggleMiddleButton() {
  // 切换中间按钮的状态
  isMiddleActive.value = !isMiddleActive.value;
  isRightActive.value = false;
  isLeftActive.value = false;
  store.dispatch("updateHSetMotior", isLeftActive.value);
  store.dispatch("updateHSetDoor", isMiddleActive.value);
  store.dispatch("updateHSetFace", isRightActive.value);
}
function toggleRightButton() {
  // 切换右侧按钮的状态
  isRightActive.value = !isRightActive.value;
  isMiddleActive.value = false;
  isLeftActive.value = false;
  store.dispatch("updateHSetMotior", isLeftActive.value);
  store.dispatch("updateHSetDoor", isMiddleActive.value);
  store.dispatch("updateHSetFace", isRightActive.value);
}

const select = [{
  id: 1,
  name: "巡查任务1",
},
{
  id: 2,
  name: "巡查任务2",
},
{
  id: 3,
  name: "巡查任务3",
}
];
onMounted(() => {
  // 从store中获取所有设备，并过滤出modelType为1的设备
  const allDevices = store.state.motiorNum || [];
  const monitorDevices = allDevices.filter(device => device.modelType === 1);
  
  isLeftActive.value = store.state.motior;
  monitor.value = monitorDevices.length;
  
  console.log("监控设备列表(modelType=1):", monitorDevices);
});

// 监听监控列表变化
watch(
  () => store.state.motiorNum,
  (newValues) => {
    if (!Array.isArray(newValues)) return;
    
    // 过滤出modelType为1的设备
    const monitorDevices = newValues.filter(device => device.modelType === 1);
    monitor.value = monitorDevices.length;
    
    console.log("更新后的监控设备列表(modelType=1):", monitorDevices);
  }
);
</script>

<style scoped lang="scss">
.side-left-right {
  padding: 0;
  // width: 392px;
}

.item-plane {
  display: flex;
  justify-content: space-between;
  padding: 0;
}

.item_1 {
  height: 26%;

  .head1 {
    display: flex;
    margin-top: 12px;
    height: 45px;
    background-image: url('/imgs/hf/navi.png');
    background-position: left;
    background-size: 100% 100%;

    .text1 {
      margin-top: 9px;
      margin-left: 83px;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 24px;
      color: #fff;
      background: linear-gradient(180deg, #FFFFFF 50%, #77BC9C 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .container {
    display: flex;
    // width: 100%;
    margin-top: 8px;
    gap: 5px;
    justify-content: center;
    margin-left: 16px;
    margin-top: 18px;

    .bg1,
    .bg2,
    .bg3 {
      width: 180px;
      height: 200px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url("/imgs/af/圆角矩形 1@2x(2).png");
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;


      .text1 {
        font-family: Adobe Heiti Std R;
        font-weight: 400;
        font-size: 15px;
        color: #137DFF;

        background: linear-gradient(180deg, #FFFFFF 50%, #FFFFFF 50%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .text2 {
        font-family: Adobe Heiti Std;
        font-weight: normal;
        font-size: 24px;
        color: #137DFF;
        line-height: 35px;

        background: linear-gradient(0deg, #FFFFFF 0%, #80FFC2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .left-button,
      .middle-button,
      .right-button {
        width: 100%;
        height: 30px;
        background-image: url('/imgs/jf/ui_2/组 1672.png');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        transition: background-image 0.5s ease;
        cursor: pointer;

        display: flex;
        justify-content: center;
        align-items: center;

        &.active {
          background-image: url('/imgs/jf/ui_2/组 1670.png');
        }
      }
    }

    .bg1.activebg,
    .bg2.activebg,
    .bg3.activebg {
      background-image: url("/imgs/af/圆角矩形 1@2x(1).png");
    }
  }
}

.item_5 {
  height: 80%;

  .head {
    display: flex;
    margin-top: 12px;
    height: 45px;
    background-image: url('/imgs/hf/navi.png');
    background-position: left;
    background-size: 100% 100%;

    .title {
      margin-top: 9px;
      margin-left: 83px;
      width: auto;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 24px;
      color: #FFFFFF;
      background: linear-gradient(180deg, #FFFFFF 50%, #77BC9C 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 4px;
    margin-left: 32px;
    background-position: left;
    background-size: 100% 100%;

    .shexiang {
      display: flex;
      margin-top: 12px;
      height: 180px;
      width: 95%;
      background-image: url('/imgs/hf/shexiang.png');
      background-position: left;
      background-size: 100% 100%;
    }
  }
}

.item_2 {
  height: 70%;

  .head2 {
    display: flex;
    margin-top: 18px;
    height: 45px;
    background-image: url('/imgs/hf/navi.png');
    background-position: left;
    background-size: 100% 100%;
  }

  .text2 {
    margin-top: 9px;
    margin-left: 83px;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 24px;
    color: #fff;
    background: linear-gradient(180deg, #FFFFFF 50%, #77BC9C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .box {
    margin-left: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 18px;

    .xiala {
      width: 329px;
      height: 34px;
      background-color: transparent;
      background-image: url('/imgs/af/xiala.png');
      background-position: left;
      background-size: 100% 100%;
      color: white;
      border: 1px solid #ccc;
      font-size: 16px;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      margin-bottom: 7px;
    }

    .xiala::-ms-expand {
      display: none;
    }

    .xiala:focus {
      border-color: #888;
    }

    .xiala option {
      background-color: rgba(255, 255, 255, 0.8);
      color: black;
    }

    .xiala option:hover {
      background-color: rgba(0, 0, 0, 0.2);
    }

    .people {
      width: 36px;
      height: 34px;
      margin-left: 5px;
      margin-top: -5px;
      ;
      background-image: url('/imgs/af/people.png');
      background-position: left;
      background-size: 100% 100%;
    }

    .info {
      margin-top: 5px;
      margin-bottom: 8px;
      width: 406px;
      height: 165px;
      background-image: url('/imgs/af/info.png');
      background-position: left;
      background-size: 100% 100%;

      .one {
        align-items: baseline;
        display: flex;
        padding: 5px;

        .title {
          width: 80px;
          height: 14px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 35px;
        }

        .value {
          width: 274px;
          height: 36px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          font-size: 14px;
          color: #63ECCB;
          line-height: 22px;
        }
      }
    }


    .bg {
      margin-left: 0px;
      margin-top: 5px;
      width: 170px;
      height: 150px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      background-image: url('/imgs/af/yuanbg.png'); // 背景图片
      background-size: cover;
      border: 1px solid #3A8260FF;
      border-radius: 8px;

      .pic1 {
        margin-top: 2;
        width: 170px;
        height: 150px;
        background-image: url('/imgs/hf/lu.png');
        background-position: left;
        background-size: 100% 100%;
        border-radius: 8px;
        flex-direction: column;
        display: flex;
        justify-content: end;
      }
    }

    .pic2 {
      margin-left: 10px;
      margin-top: 5px;
      width: 188px;
      height: 150px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      background-image: url('/imgs/af/yuanbg.png'); // 背景图片
      background-size: cover;
      border: 1px solid #3A8260FF;
      border-radius: 8px;

      .top {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: 100%;

        .chart {
          margin-top: 16px;
          width: 80%;
          height: 80%;
        }

        .you {
          display: flex;
          flex-direction: column;
          width: 120px;
          height: 50px;
          flex-wrap: wrap;
          margin-top: 24px;

          .left {
            display: flex;
            flex-direction: row;

            img {
              width: 17px; // 图标大小
              height: 17px;
              margin-bottom: 5px; // 图标与文字间距
            }

            .title {
              font-size: 14px; // 巡查点标题字体大小
              color: white;
              margin-bottom: 5px; // 标题与数字间距
            }
          }

          .right {
            font-size: 18px; // 数字字体大小
            font-weight: bold;
            margin-left: 4px;

            .qian {
              color: #35E384; // 已完成部分颜色
            }

            .hou {
              color: white; // 总数部分颜色
            }
          }
        }
      }

      .bottom {
        margin-bottom: 3px; // 向底部对齐
        height: 22px;
        width: 182px;
        margin-left: 4px;
        display: flex;
        align-items: center;
        background-image: url('/imgs/af/矩形 579@2x(1).png'); // 底部背景图片
        background-size: cover;
        border-radius: 2px;

        .text {
          font-size: 14px;
          font-weight: 400;
          font-family: FZHanZhenGuangBiaoS-GB;
          line-height: 12px;
          color: #FFFFFF;
          margin-left: 5px;
        }
      }
    }

    .bg1 {
      margin-left: 0px;
      margin-top: 10px;
      width: 374px;
      height: 150px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      background-image: url('/imgs/af/yuanbg.png'); // 背景图片
      background-size: cover;
      border: 1px solid #3A8260FF;
      border-radius: 8px;

      .pic3 {
        margin-top: 3px;
        margin-left: 1px;
        width: 370px;
        height: 157px;
        background-image: url('/imgs/hf/shijiao.png');
        background-position: left;
        background-size: 100% 100%;
        flex-direction: column;
        display: flex;
        justify-content: end;
      }
    }
  }
}
</style>